<template>
    <div>
        <el-card class="article-select">
            <div slot="header" class="clearfix">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!--表单-->
            <el-form ref="form" :model="form" label-width="40px" size="mini">
                <el-form-item label="状态">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="全部"></el-radio>
                        <el-radio label="草稿"></el-radio>
                        <el-radio label="待审核"></el-radio>
                        <el-radio label="审核通过"></el-radio>
                        <el-radio label="审核失败"></el-radio>
                        <el-radio label="已删除"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="频道">
                    <el-select v-model="form.region" placeholder="请选择频道">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="value2"
                            type="datetimerange"
                            align="right"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="article-content">
            <!--表格-->
            <el-table
                    :data="articleData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        label="封面"
                        width="180"
                        prop="img_url"
                >
                    <!--表格列默认只能渲染普通文本，如果需要展示其它内容，例如放个按钮啊、放个图片啊，那就需要自定义表格列模板了-->
                    <template slot-scope="scope">
                        <el-image
                                style="width: 80px; height: 80px"
                                :src="scope.row.picture.image[0]"
                                fit="fill">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="articleStatus[scope.row.status].type">{{articleStatus[scope.row.status].text}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="publishTime"
                        label="发布时间">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="editClick(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="delClick(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                    :style="{'margin-top':'30px'}"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
   /* import { userLoginData } from "../../api/user";*/
    export default {
        name: "articleManage",
        data:function(){
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                value2:'',
                articleData: [],
                articleStatus: [
                    { status: 0, text: '草稿', type: 'info' }, // 0
                    { status: 1, text: '待审核', type: '' }, // 1
                    { status: 2, text: '审核通过', type: 'success' }, // 2
                    { status: 3, text: '审核失败', type: 'warning' }, // 3
                    { status: 4, text: '已删除', type: 'danger' } // 4
                ],
            }
        },
        methods:{
            editClick(id){
                this.$router.push({
                    name:'publish',
                    query: { id: id }
                })
            },
            delClick(id){
                this.$confirm('是否删除信息?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.state.articleData.forEach( (item,index) =>{
                        if(item.id === id){
                            this.$store.state.articleData.splice(index,1)
                            console.log(this.$store.state.articleData);
                        }
                    })
                }).catch(() => {
                    console.log("取消删除");
                });
            }
        },
        created() {
           /* userLoginData().then(res=>{
                console.log(res);
            })*/
            this.articleData = this.$store.state.articleData
        }
    }
</script>

<style scoped lang="scss">
    .article-select{
        margin-bottom: 20px;
    }
</style>
